import React, { useEffect, useState } from 'react'
import styles from './index.module.less'
import { Avatar } from 'antd-mobile'
import Icon from '@/components/Icons'
import HtmlContent from '@/components/HtmlContent'
import { useStore } from '@/store'
const CommentList: React.FC = () => {
  useEffect(() => {
    setComments([...mockData,...mockData])
  }, [])
  const sendComment = useStore(state => state.sendComment)
  useEffect(() => {
    console.log('sendComment', sendComment)
    let data ={
      avatar: avatar,
      name: '王五',
      content: sendComment,
      time: '2022-01-03',
      likeCount: 3,
      replyCount: 1,
      replies: []
    }
    if(sendComment){
      setComments([...comments,data])
    }
  }, [sendComment])
  const avatar = useStore(state => state.avatar)
  const [count, setCount] = useState(0)
  const [comments, setComments] = useState<any>([])
  let mockData = [
    {
      avatar: avatar,
      //作者名字
      name: '张三',
      content:
        '<p>啊实打实的<img src="/src/assets/images/emojis/7a6287c7f65fabdc15fa8f06b2696cccc21e86f2.png" style="width: 20px; height: 20px;display:inlne;" >撒大苏打撒</p>',
      time: '2022-01-01',
      likeCount: 10,
      replyCount: 5,
      replies: [
        {
          avatar: avatar,
          name: '李四',
          content: '<p>大撒大撒撒旦as<img src="/src/assets/images/emojis/238271771c806047fc928b6ba49a6d8e7a741e5e.png"></p>',
          time: '2022-01-02',
          likeCount: 5,
          replyCount: 2
        },
        {
          avatar: avatar,
          name: '王五',
          content: '炸街的都是大排量，都很贵，普通人只买得起小排量的，一点儿都不炸街。小排量的才是主流，但却被那些大排量的给代表了',
          time: '2022-01-03',
          likeCount: 3,
          replyCount: 1,
          replies: []
        },
        //回复王五的数据
        {
          avatar: avatar,
          name: '赵六',
          replyName: '王五',
          content: '觉得都很有风度。偶尔窜两下我都会主动让的哈哈哈',
          time: '2022-01-04',
          likeCount: 2,
          replyCount: 0
        }
      ]
    }
  ]
  return (
    <div className={styles.commentListWrapper}>
      <div className={styles.commentHeader}>
        <div className={styles.commentHeaderLeft}>
          <span className={styles.commentHeaderTitle}>共</span>
          <span className={styles.commentHeaderCount}>{count}</span>
          <span className={styles.commentHeaderTitle}>条评论</span>
        </div>
      </div>
      <div className={styles.commentMain}>
        {comments.map((item: any, index: number) => (
          <div className={`${styles.commentItem} ${styles.commentItemMain}`} key={index}>
            <div className={styles.avatarBox}>
              <Avatar style={{ '--border-radius': '50%', '--size': '40px' }} src={avatar} />
            </div>
            <div className={styles.commentRight}>
              <div className={styles.commentContent}>
                <span className={styles.author}>{item.name}</span>
                <span className={styles.commentDesc}><HtmlContent content={item.content} /></span>
                <span className={styles.commentArea}>04-21 四川</span>
                <div className={styles.iconWrapper}>
                  <div className={styles.iconItem}>
                    <Icon iconName='icon-shuju_xiaohongshudianzan_xianxing' />
                    <span className={styles.commentCount}>{item.likeCount}</span>
                  </div>
                  <div className={styles.iconItem}>
                    <Icon iconName='icon-comment-v2' />
                    <span className={styles.commentCount}>{item.likeCount}</span>
                  </div>
                </div>
              </div>
              {item.replies.length > 0 && (
                <div className={styles.repliesWrapper}>
                  {item.replies.map((item: any, index: number) => (
                    <div className={styles.commentItem} key={index}>
                      <div className={styles.avatarBox}>
                        <Avatar style={{ '--border-radius': '50%', '--size': '24px' }} src={avatar} />
                      </div>
                      <div className={styles.commentRight}>
                        <div className={styles.commentContent}>
                          <span className={styles.author}>{item.name}</span>
                          <span className={styles.commentDesc}>{
                          item.replyName?(
                             <>
                               <span className={styles.replyText}>回复</span>
                               <span className={styles.replyName}>{item.replyName}:</span>
                               <span className={styles.replyContent}>
                                <HtmlContent content={item.content} />
                                </span>
                             </>
                          ): <span className={styles.replyContent}>
                          <HtmlContent content={item.content} />
                          </span>
                          }</span>
                          <span className={styles.commentArea}>04-21 四川</span>
                          <div className={styles.iconWrapper}>
                            <div className={styles.iconItem}>
                              <Icon iconName='icon-shuju_xiaohongshudianzan_xianxing' />
                              <span className={styles.commentCount}>{item.likeCount}</span>
                            </div>
                            <div className={styles.iconItem}>
                              <Icon iconName='icon-comment-v2' />
                              <span className={styles.commentCount}>回复</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
export default CommentList
